<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>css loading </title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		body {
			width: 100%;
			height: 100vh;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.loading-wrap {
			border: solid 10px rgba(109, 219, 254, 0.2);
			border-radius: 50%;
			width: 100px;
			height: 100px;
			position: relative;
			box-sizing: content-box;
		}
		
		.loading {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 1;
			top: -10px;
			left: -10px;
			animation: rotate 1.5s linear infinite;
		}
		
		@keyframes rotate {
			to {
				transform: rotate(360deg);
			}
		}
		
		.circle {
			/* 注：使用 document.querySelector('.circle').getTotalLength() 可以得到圆一圈大小约为345 */
			stroke-dasharray: 345;
			stroke-dashoffset: 300;
			position: relative;
			z-index: 10;
		}
	</style>
</head>

<body>
	<div class="loading-wrap">
		<svg class="loading">
			<circle class="circle" cx="60" cy="60" r="55" fill="transparent" stroke="#6DDBFE" stroke-linecap="round" stroke-width="10"></circle>
		</svg>
	</div>
</body>

</html>